import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { UnorderedList } from '@zendeskgarden/react-typography';
import { UnorderedListStory } from './stories/UnorderedListStory';
import { LIST_ITEMS as ITEMS } from './stories/data';
import README from '../README.md';

<Meta
  title="Packages/Typography/Lists/UnorderedList"
  component={UnorderedList}
  subcomponents={{ 'UnorderedList.Item': UnorderedList.Item }}
/>

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="UnorderedList"
    args={{ items: ITEMS }}
    argTypes={{ items: { name: 'UnorderedList.Item[]', table: { category: 'Story' } } }}
  >
    {args => <UnorderedListStory {...args} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
